<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<div class="padding-all-dbl">
  <div class="full-width pull-left">
  	<h1 class="font-18 bold font-dark"><c:out value="${param.title}" escapeXml="false"/></h1>
  	<div class="form margin-vertical border-all padding-all round-corner">
  		<form action="${param.action}" name="ksr-business-signup-form" class="form formalize ${param.mode}" method="post">
  		<c:choose>
  			<c:when test="${not empty param.mode and param.mode eq 'view'}">
		  		<c:set var="field_property" value="disabled" scope="request"/>
  			</c:when>
  			<c:otherwise>
		  		<c:set var="field_property" value="" scope="request"/>
  			</c:otherwise>
  		</c:choose>
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="businessName" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="businessName" class="label table-cell text-left">Name:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${business.businessName}" name="businessName" id="businessName" class="text-field required full-width font-16 form-control" placeholder="business name" ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="categories" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="categories" class="label table-cell text-left">Categories:</label>
	  			<div class="table-cell">
	  				<c:set var="ctgList" value="${categoryList}" scope="request"/>
	  			 	<div class="category-box border-all padding-all-half round-corner">
	  				 <jsp:include page="/WEB-INF/modules/category-list.jsp"/>
	  			 	</div>
	  			</div>
  			</div>
  		</div>
 
   		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="emailAddress" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="emailAddress" class="label table-cell text-left">Email:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${business.emailAddress}" name="emailAddress" id="emailAddress" class="text-field required email full-width font-16 form-control" placeholder="email" remote="/ksr/business/check-email.json" ${field_property}/>
	  			</div>
  			</div>
  		</div>
 
 		<div class="input-item font-16 full-width margin-vertical-half ${param.mode}">
			<c:if test="${not fn:contains(param.mode , 'create')}">
	    		<div class="alert font-15 ${param.mode}">
		    		<fmt:message key="msg.reset-password-desc"/>
	    		</div>	   		
    		</c:if>  		
 			<div class="errContainer  errorMsg">
				<label for="password" class="error"></label>
			</div>
			<div class="full-width table-disp">
				<label for="password" class="label table-cell text-left">Password:</label>
				<div class="table-cell">
		  			<input type="password" value="" name="password" class="full-width font-16 text-field password1 form-control <c:if test="${param.mode eq 'create'}">required</c:if>" ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		<div class="input-item font-16 full-width margin-vertical-half ${param.mode}">
 			<div class="errContainer  errorMsg">
				<label for="password2" class="error"></label>
			</div>
			<div class="full-width table-disp">
				<label for="password2" class="label table-cell text-left">Password2:</label>
				<div class="table-cell">
		  			<input type="password" value="" name="password2" class="full-width font-16 text-field form-control <c:if test="${param.mode eq 'create'}">required</c:if>" equalTo=".password1" ${field_property}/>
	  			</div>
  			</div>
  		</div> 		
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="phoneNumber" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="phoneNumber" class="label table-cell text-left">Phone:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${business.phoneNumber}" name="phoneNumber" id="phoneNumber" class="text-field required full-width font-16 form-control" placeholder="Phone Number" ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="specialty" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="specialty" class="label table-cell text-left">Specialty:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${business.specialty}" name="specialty" id="specialty" class="text-field required full-width font-16 form-control" placeholder="Specialty" ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="webSite" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="webSite" class="label table-cell text-left">WebSite:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${business.webSite}" name="webSite" id="webSite" class="text-field required full-width font-16 form-control" placeholder="WebSite" ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="description" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="description" class="label table-cell text-left">Description:</label>
	  			<div class="table-cell">
	  				<textarea name="description" class="text-field full-width font-16 form-control" placeholder="business description" ${field_property}>${business.description}</textarea>
	  			</div>
  			</div>
  		</div>
  		<div class="clearfix"></div>
  		
  		
  		
  	<div id="add-an-office-wrapper" class="input-item  margin-top-dbl">
		<div id="add-an-office" class="block margin-left-half font-white btn btn-success pull-left"><i class="icon-plus-sign-alt"></i> 
			<span>Add an office</span>
		</div>
			<c:set var="officesCount" value="${fn:length(business.offices)}"/> 
			<c:if test="${empty officesCount or officesCount eq 0}"><c:set var="officesCount" value="1"/></c:if> 		
			<div class="total-offices margin-left-dbl margin-top-half pull-left font-13 padding-horizontal padding-vertical-half">Total: <span class="count">${officesCount}</span></div>
 	</div>
 	<div class="clearfix"></div> 
   		<span id="office-list">
   			<c:choose>
   				<c:when test="${not empty business.offices and fn:length(business.offices) gt 0}">
		    		<c:forEach items="${business.offices}" var="office" varStatus="status">
		    			<c:set var="office" value="${office}" scope="request"/>
						<jsp:include page="/WEB-INF/modules/office-template.jsp" flush="true">
							<jsp:param name="idx" value="${status.index}"/>
							<jsp:param name="count" value="${status.count}"/>
							<jsp:param name="officesCount" value="${officesCount}"/>
						</jsp:include>
					</c:forEach>
		    			<c:remove var="office" scope="request"/>
   				</c:when>
   				<c:otherwise>
						<jsp:include page="/WEB-INF/modules/office-template.jsp" flush="true">
							<jsp:param name="idx" value="0"/>
							<jsp:param name="count" value="1"/>
							<jsp:param name="officesCount" value="1"/>
						</jsp:include>
   				</c:otherwise>
   			</c:choose>
  		</span>

  			<div class="clearfix"></div>
    		<div class="submit-button ${param.mode} margin-top">
	    		<button type="submit" class="btn btn-primary">Submit</button>	
	    		<button type="reset" class="btn btn-default"><fmt:message key="msg.reset"/></button>	
    		</div>	 
  		</form>
  	</div>
  </div>
</div>
<div class="clearfix"></div>
	<div id="office-temp">
		<jsp:include page="/WEB-INF/modules/office-template.jsp" flush="true">
			<jsp:param name="officesCount" value="1"/>
		</jsp:include>
	</div>
  <script type="text/javascript" src="/ksr/javascript/business-signup.js"></script>